<template>
	<view class="content">
		<view class="title">
			<view class="icon"></view>
			<view class="text">{{contentTitle}}</view>
		</view>
		<view class="answer">{{content}}</view>
	</view>
	<fixed-button @touch="copy(content)">一键复制</fixed-button>
</template>

<script setup>
	import { ref } from 'vue';
	import request from '@/utils/common/request/index';
	import { onLoad } from '@dcloudio/uni-app';
	import { copy } from '@/utils/common/index.js';
	import { useGetThemColor } from '@/hooks/useGetThemColor';


	const { primaryColor } = useGetThemColor();

	let article_id = '';
	onLoad(options => {
		article_id = options.id;
		getContent();
	})

	let content = ref('');
	let contentTitle = ref('');
	const getContent = () => {
		request({
			url: `/api/wenan/detail?kwaId=${article_id}`,
			loadingTip: '加载中'
		}).then(res => {
			content.value = res.content;
			contentTitle.value = res.title;
		})
	};
</script>

<style scoped lang="scss">
	.content {
		padding: 14px;
	}

	.title {
		display: flex;

		.icon {
			margin-top: 3px;
			margin-right: 8px;
			width: 5px;
			height: 20px;
			background-color: v-bind(primaryColor);
			border-radius: 4px;
		}

		.text {
			font-size: 18px;
			font-weight: bold;
		}
	}

	.answer {
		padding-top: 14px;
		word-wrap: break-word;
		word-break: break-word;
		white-space: pre;
		line-height: 24px;
		font-size: 15px;
	}
</style>